<template>
  <h2>推荐菜品</h2>
  <!-- <a-button type="primary" @click="addDish">新增菜品</a-button> -->
  <!-- <a-table :dataSource="dishes" :columns="columns" rowKey="id"> -->
  <a-table :dataSource="foods_list" :columns="columns" rowKey="id">
    <template #cate="{ record }">
        <text v-for="it in record.categories" :key="it">{{it}}、</text>
      </template>
    <template #action="{ record }">
      <a-button type="primary" @click="shelves(record.food_id)"
        >上架</a-button
      >
      <!-- <text v-if="column.dataIndex == 'on_sale'">abc</text> -->
    </template>
  </a-table>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      shop_id: 0,
      foods_list: [],
      columns: [
        { title: '菜品名称', dataIndex: 'name', key: 'name' },
        { title: '价格', dataIndex: 'price', key: 'price', width: 100 },
        // { title: '分类', dataIndex: 'categories', key: 'categories' },
        { title: '分类', key: 'categories', slots: { customRender: 'cate' }, ellipsis: true },
        { title: '描述', dataIndex: 'description', key: 'description', ellipsis: true },
        { title: '折扣', dataIndex: 'discount', key: 'discount', width: 100 },
        { title: '图片url', dataIndex: 'img_url' , key: 'image', ellipsis: true },
        // { title: '是否上架', dataIndex: 'on_sale', key: 'on_sale', width: 100 }, 
        { title: '操作', key: 'action', slots: { customRender: 'action' } },
      ],
    };
  },

  mounted: function () {

// 判断是否登录
    if (!this.$store.state.is_login)
    {
        alert("未登录，请先登录!")
       this.$router.push('/');
       return;
    }

    this.shop_id = this.$store.getters.shop_id;

    axios
      .get("/shop/getRcmdFoodByShopId", {
        params: {
          shop_id: this.shop_id,
        },
      })
      .then((res) => {
        // let tmp = res.data.data;
        this.foods_list = res.data.data;
        console.log(this.foods_list);
      });
  },

  methods: {
    shelves(food_id) {
        axios.get('/shop/shelvesByShopIdAndFoodId', {
            params: {
                shop_id: this.shop_id,
                food_id: food_id
            }
        }).then((res) => {
            console.log(res.data);
            if (res.data.msg  == 'success')
                alert('上架成功！')
            else if (res.data.msg == 'duplicate')
                alert('该商品已上架！')
            else
                alert('上架失败！')
        })
    }
  }
};
</script>
